<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :transparent="true" backgroundColor="#313431" color="#FFFFFF"
			:title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack('pages/user/index')"></view>
			</view>
		</tui-navigation-bar>
		<view class="main" v-if="account">
			<view class="my-balance" :class="{'my-balance-amount': account.freezeBalance <= 0}">
				<view class="balance">
					<text class="f-26 col-f f-n">余额</text>
					<text class="balance-pirce">￥{{account.accountBalance}}</text>
				</view>
				<view class="balance-info">
					<view class="balance">
						<text class="f-26 col-f f-n">可提现金额</text>
						<text class="pirce">￥{{account.balance}}</text>
					</view>
					<view class="balance">
						<text class="f-26 col-f f-n">绑定银行卡</text>
						<view class="bank-card">
							<view v-if="!account.cardNumber" class="binding" @click="decliningCard">去绑定</view>
							<view v-else class="card"> {{account.bankName}}({{account.cardNumber}})<text
									style="margin-left: 22rpx;" class="binding" @click="deMoveCard">解绑</text> </view>
						</view>
					</view>
				</view>
			</view>
			<view class="wallet-hint" v-if="account.freezeBalance > 0">{{walletHint}}</view>
			<view class="btn-primary btn-submit" @click="onDeposit">提现</view>
			<view class="transaction-record" v-if="accountList.list.length > 0">
				<view class="title">交易记录</view>
				<view class="transaction-record-scroll">
					<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="record-item" v-for="(item,index) in accountList.list" :key="index">
							<view class="record-header">
								<view class="record-type">{{item.tradeTypetText}} </view>
								<view v-if="item.inOutFlag == 1" class="pirce">+{{item.tradeAmount}}</view>
								<view v-else class="fu-pirce">-{{item.tradeAmount}}</view>
							</view>
							<view class="record-bottom">
								<view class="record-time">{{item.createTime}}</view>
								<view class="balance">钱包余额：{{item.remainderAmount}}</view>
							</view>
						</view>
						<view v-show="load.loading">
							<uv-load-more :status="load.status" :loading-text="load.loadingText"
								:nomore-text="load.nomoreText" :line="load.status == 'nomore'" />
						</view>
					</scroll-view>
				</view>
			</view>
			<empty v-else
				:image="'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/empty-wallet.png'">
				钱包空空如也，爆点金币吧</empty>
		</view>
		<uv-popup ref="popupBottom" mode="bottom" round="20">
			<view class="popup-bottom">
				<view class="header">
					<view class="title">绑定银行卡</view>
					<view class="close" @tap="closeBottomPop"><text class="dy-iconfont icon-a-bianzu69"></text>
					</view>
				</view>
				<view class="rz-list">
					<view class="name">开户银行</view>
					<input :cursor-spacing="cursorSpacing1" :always-embed="true" class="rz-input" v-model="value1"
						type="text" placeholder="请填写" />
				</view>
				<view class="rz-list">
					<view class="name">银行账号</view>
					<input :cursor-spacing="cursorSpacing2" :always-embed="true" class="rz-input" v-model="value2"
						type="idcard" placeholder="请填写" />
				</view>
				<view class="message">
					<view>您的银行卡信息用于后续在平台收入的结算。</view>
					为了您在平台资金的入账便捷与安全，我们将为您开通用于收款的微信商户账户，后续微信产生的结算费率将由平台承担，您无需再额外支付提现费用。
				</view>

				<view class="signPop">
					<button class="btn-primary btn-custom" @tap.stop.prevent="closeBottomPop">取消</button>
					<button class="btn-primary btn-default" @tap.stop.prevent="onDecliningOrder">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-action-sheet ref="actionSheet" round="20" :actions="list" :closeOnClickAction="false"
			@select="selectMediaItem">
		</uv-action-sheet>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	const app = getApp();
	import {
		moneyFormat
	} from "@/utils/util.js";
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '我的钱包', //标题
				walletHint: "您有部分收入暂处于客诉保护期(订单完成后24小时内)不可提现，到期且无售后情况下，该笔金额将变为可提现状态。",
				bankCard: '',
				value1: '',
				value2: '',
				list: [{
					name: '解除绑定',
					lable: 'remove'
				}, {
					name: '取消',
					lable: 'cancel'
				}],
				cursorSpacing1: 600,
				cursorSpacing2: 600,
				account: null, //账户信息
				accountList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {
			// this.balance = moneyFormat(this.balance, 2)
			this.getPageData()
		},
		onShow: function() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.cursorSpacing1 = 219
					this.cursorSpacing2 = 165
					break;
				case 'ios':
					this.cursorSpacing1 = 600
					this.cursorSpacing2 = 600
					break;
			}
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.getPageData()
		},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		/**
		 * 计算属性
		 */
		computed: {},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			closeBottomPop() {
				this.$refs.popupBottom.close();
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.getUserAccount(), this.requestTransactionRecord()]).then(() => {
					uni.stopPullDownRefresh();
				});
			},
			//消除js计算误差add、reduce是传入的加减数字,reduce是被加数（被减数），s是加减符号
			formatNum(add, reduce, s, num) {
				let m = Math.pow(10, num); //num是10的次幂
				let res = s == '+' ? (add * m + reduce * m) / m : (add * m - reduce * m) / m;
				return Math.round(res * m) / m;
			},
			getUserAccount() {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/user-account/wallet", null,
						(result) => {
							let data = result.data
							data.accountBalance = data.accountBalance || '0.00'
							data.freezeBalance = data.freezeBalance || '0.00'
							let pirce = this.formatNum(data.accountBalance, data.freezeBalance, '-', 2)
							let balance = pirce > 0 ? pirce : '0.00'
							this.$set(data, 'balance', balance)
							this.account = data
							resolve(data);
						}, null, () => {
							resolve(false);
						}
					);
				});
			},
			lower() {
				if (this.accountList.hasMore && this.accountList.loading) {
					this.load.loading = true
					this.requestTransactionRecord()
				}
			},
			// 交易记录列表查询
			requestTransactionRecord() {
				return new Promise((resolve, reject) => {
					this.accountList.loading = false
					app._post_form(
						"//client/user-account/record/page", {
							current: this.accountList.page,
							extra: {},
							model: {
								tradeType: 0,
							},
							order: "descending",
							size: 10,
							sort: "id"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.accountList;
							if (1 == page) {
								list.length = 0;
							}
							list = [...list, ...records];
							hasMore = total > list.length;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else {
								this.load.status = 'nomore'
							}
							list.forEach(item => {
								let tradeTypetText = this.getTradeTypet(item.tradeType, item
									.applyState)
								this.$set(item, 'tradeTypetText', tradeTypetText)
							})
							this.accountList.page = page;
							this.accountList.list = list;
							this.accountList.hasMore = hasMore;
						}, null, () => {
							resolve();
							this.accountList.loading = true
						}
					);
				});
			},
			getTradeTypet(status, applyState) {
				switch (status) {
					case 1:
					case '1':
						return '到账'
					case 2:
					case '2':
						if (applyState == 0)
							return '提现-提现中'
						if (applyState == 2)
							return '提现-提现失败'
						if (applyState == 1)
							return '提现-银行卡'
						return '提现-银行卡'
					case 3:
					case '3':
						return '退款'
					case 4:
					case '4':
						return '红包'
				}
			},
			onDecliningOrder() {
				let that = this

				if (!that.value1) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入开户银行"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.value2) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入银行账号"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				that.$refs.toast.show({
					type: 'loading',
				})
				throttle(app._post_form(
					"/client/merchant/bind-bank-card", {
						bankName: that.value1,
						cardNumber: that.value2,
					},
					(result) => {
						setTimeout(() => {
							that.$refs.toast.show({
								type: 'success',
								message: "绑定成功"
							})
							that.getUserAccount()
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
						}, 200)
						that.closeBottomPop()
					}, null, () => {
						that.$refs.toast.hide()
					}
				), 1000, true)
			},
			decliningCard() {
				this.$refs.popupBottom.open();
			},
			deMoveCard() {
				this.$refs.actionSheet.open();
			},
			selectMediaItem(e) {
				console.log(e);
				if (e.lable == 'cancel') {
					this.$refs.actionSheet.close();
				} else {
					this.onRemoveCard()
				}
			},

			onRemoveCard() {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				throttle(app._post_form(
					"/client/merchant/unbind-bank-card", that.account.bankId,
					(result) => {
						setTimeout(() => {
							that.$refs.toast.show({
								type: 'success',
								message: "解绑成功"
							})
							that.getUserAccount()
							setTimeout(() => {
								that.$refs.toast.hide()
							}, 1000)
						}, 200)
						this.$refs.actionSheet.close();
					}, null, () => {
						that.$refs.toast.hide()
					}
				), 1000, true)
			},
			onDeposit() {
				let that = this
				if (that.account.balance <= 0) {
					that.$refs.toast.show({
						type: 'default',
						message: "无可提现金额"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.account.bankId) {
					that.$refs.toast.show({
						type: 'default',
						message: "请先绑定银行卡"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				app.navigationTo('page_account/wallet/deposit?bankId=' + that.account.bankId + '&bankName=' + that.account
					.bankName + '&balance=' + that.account.balance)
			},
			// 返回上一页
			goBack: function(url) {
				if (url) {
					app.navigationTo(url)
				} else {
					app.beNavigateBack();
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;
		position: relative;
		z-index: 1;

		&::after {
			position: absolute;
			display: block;
			left: 0;
			right: 0;
			top: 0;
			content: '';
			width: 100%;
			height: 558rpx;
			background: linear-gradient(134deg, #2E322E 0%, #2E322E 0%, #404540 23%, #0E0E0D 100%);
			z-index: -2;
		}


		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #fff;
				font-size: 36rpx;
				// box-sizing: border-box;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}


		.main {
			box-sizing: border-box;
			padding: 212rpx 24rpx 66rpx;
			/* #ifdef H5 */
			padding: 124rpx 24rpx 66rpx;
			/* #endif */
			height: 100%;
			position: relative;

			.my-balance {
				box-sizing: border-box;
				padding: 42rpx 68rpx 36rpx 28rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 32rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				backdrop-filter: blur(10rpx);
				height: 298rpx;
				margin-bottom: 222rpx;

				&.my-balance-amount {
					margin-bottom: 90rpx;
				}

				.balance {
					margin-bottom: 58rpx;

					.balance-pirce {
						display: inline-block;
						font-size: 48rpx;
						font-weight: 900;
						color: #FFFFFF;
						margin-left: 12rpx;
					}
				}

				.balance-info {
					display: flex;
					justify-content: space-between;

					.balance {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-bottom: 0;

						.pirce {
							margin-top: 10rpx;
							font-size: 30rpx;
							font-weight: 900;
							color: #FFFFFF;
							line-height: 42rpx;
						}
					}

					.bank-card {
						margin-top: 10rpx;
						font-size: 28rpx;
						font-weight: 900;
						color: #FFFFFF;
						line-height: 42rpx;

						.binding {
							font-size: 26rpx;
							font-weight: 400;
							color: #9EBBFF;
							line-height: 44rpx;
						}
					}
				}
			}


			.withdraw-deposit {
				background: rgba(255, 255, 255, 0.3);
				border-radius: 8rpx;
				backdrop-filter: blur(10rpx);
				box-sizing: border-box;
				padding: 18rpx 28rpx;
				margin-bottom: 214rpx;

				.deposit {
					font-size: 24rpx;
					font-weight: 400;
					color: #F6F8F7;
					line-height: 44rpx;
				}

				.money {
					font-size: 28rpx;
					font-weight: 400;
					color: #F6F8F7;
					line-height: 32rpx;
					margin-left: 16rpx;
				}
			}

			.wallet-hint {
				position: absolute;
				left: 0;
				top: 558rpx;
				/* #ifdef H5 */
				top: 470rpx;
				/* #endif */
				box-sizing: border-box;
				padding: 32rpx 36rpx;
				background: #FFF8E5;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFBF12;
				line-height: 33rpx;
			}

			.btn-submit {
				width: calc(100% - 53rpx * 2);
				margin: 0 auto 36rpx;
			}

			.transaction-record {
				.title {
					box-sizing: border-box;
					padding-left: 20rpx;
					font-size: 32rpx;
					font-weight: 900;
					color: #222222;
					line-height: 44rpx;
					margin-bottom: 24rpx;
				}

				.transaction-record-scroll {
					box-sizing: border-box;
					padding: 24rpx;
					height: 45vh;
					background: #FFFFFF;
					border-radius: 20rpx;

					.scroll-Y {
						height: 100%;

						.record-item {
							margin-bottom: 36rpx;

							.record-header {
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-bottom: 17rpx;

								.record-type {
									font-size: 30rpx;
									font-weight: 900;
									color: #282D2D;
									line-height: 44rpx;
								}

								.pirce {
									font-size: 30rpx;
									font-weight: 900;
									color: #FF4664;
									line-height: 44rpx;
								}

								.fu-pirce {
									font-size: 30rpx;
									font-weight: 900;
									color: #282D2D;
									line-height: 44rpx;
								}
							}

							.record-bottom {
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 24rpx;
								font-weight: 400;
								color: #999B9B;
								line-height: 44rpx;
							}
						}
					}
				}
			}
		}

		.popup-bottom {
			box-sizing: border-box;
			padding: 48rpx 48rpx 0;
			padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0px 0px;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-bottom: 66rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.rz-list {
				width: 100%;
				box-sizing: border-box;
				padding: 24rpx 28rpx;
				background: #F6F8F7;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.name {
					font-size: 30rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 40rpx;
				}

				.rz-input {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					text-align: right;
					// direction: rtl;
				}

				.rz-input-s {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: grey;
					line-height: 37rpx;
					text-align: right;

					&.resident {
						color: #282D2D;
					}
				}
			}

			.message {
				font-size: 22rpx;
				font-weight: 400;
				color: #999B9B;
				line-height: 30rpx;
			}

			.dashedBorder {
				border: 2rpx solid #999B9B;
				border-radius: 20rpx;
			}

			.signPop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 66rpx;

				.btn-primary {
					text-align: center;
					font-size: 32rpx;
					flex-shrink: 0;
					width: calc((100% - 24rpx) / 2);
					height: 84rpx;
					line-height: 84rpx;
				}

				.btn-custom {
					border: 2rpx solid #7B867F;
					color: #999B9B;
					background: #FFFFFF;
				}
			}

		}

		/deep/.uv-action-sheet__item-wrap {
			box-sizing: border-box;
			padding: 60rpx 25rpx 30rpx;

			.uv-action-sheet__item-wrap__item {
				align-items: flex-start;
			}
		}
	}
</style>